<template>
    <div class="container">
        <h3>个人设置</h3>
        <div style="text-align:center;" v-if="ifshow">
            <div class="headImg-content">
                <img :src="headImg" class="headImg" @click="editheadimg" alt="">
            </div>
        </div>
        <div style="text-align:center;" v-else>
            <div class="headImg-content" style="line-height:80px; font-size:24px; cursor:pointer;color:white;" @click="editheadimg">
                {{usernameImg}}
            </div>
        </div>
        <div class="personagecontent">
            <span class="pc-name">姓名：</span>
            <span class="pc-con">{{data.name}}</span>
            <el-button type="text" class="pc-button" @click="editname">修改</el-button>
        </div>
        <div class="personagecontent">
            <span class="pc-name">手机号：</span>
            <span class="pc-con">{{data.phone}}</span>
            <el-button type="text" class="pc-button" @click="editphone">修改</el-button>
        </div>
        <div class="personagecontent">
            <span class="pc-name">登录密码：</span>
            <span class="pc-con">******</span>
            <el-button type="text" class="pc-button" @click="editpwd">修改</el-button>
        </div>
        <div class="personagecontent">
            <span class="pc-name">身份证号：</span>
            <span class="pc-con">{{data.idCard}}</span>
            <el-button type="text" class="pc-button" @click="editidcard">修改</el-button>
        </div>
        <div class="personagecontent">
            <span class="pc-name">组织架构：</span>
            <span class="pc-con">{{data.department}}</span>
        </div>
        <el-dialog title="修改密码" style="width:800px;margin:0 auto;" :visible.sync="dialogFormVisible">
            <el-form :model="form" ref="ruleForm" :rules="pwd">
                <el-form-item label="新密码：" prop="password" label-width="100px">
                    <el-input v-model.trim="form.password" style="width:250px;" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="再次确认：" prop="repeatpwd" label-width="100px">
                    <el-input v-model.trim="form.repeatpwd" style="width:250px;" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="abolish_editpwd">取 消</el-button>
                <el-button type="primary" @click="submit_editpwd('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改姓名" style="width:800px;margin:0 auto;" :visible.sync="dialogFormVisible1">
            <el-form :model="form1" ref="ruleForm1" :rules="names">
                <el-form-item label="姓名：" prop="name" label-width="80px">
                    <el-input v-model.trim="form1.name" style="width:250px;" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="abolish_editname">取 消</el-button>
                <el-button type="primary" @click="submit_editname('ruleForm1')">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="修改身份证号" style="width:800px;margin:0 auto;" :visible.sync="dialogFormVisible2">
            <el-form :model="form2" ref="ruleForm2" :rules="idcard">
                <el-form-item label="身份证号：" prop="idCard" label-width="100px">
                    <el-input v-model.trim="form2.idCard" style="width:250px;" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="abolish_editidcard">取 消</el-button>
                <el-button type="primary" @click="submit_editidcard('ruleForm2')">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="修改手机号" style="width:800px;margin:0 auto;" :visible.sync="dialogFormVisible4">
            <el-form :model="form4" ref="ruleForm4" :rules="phones">
                <el-form-item label="手机号：" prop="phone" label-width="80px">
                    <el-input v-model.trim="form4.phone" style="width:250px;" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="abolish_editphone">取 消</el-button>
                <el-button type="primary" @click="submit_editphone('ruleForm4')">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改头像" style="width:800px;margin:0 auto;" :visible.sync="dialogFormVisible3">
            <el-form :model="form3">
                <el-form-item label="头像：">
                    <el-upload
                        class="upload-poster"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :on-change="imgPreview"
                            :auto-upload="false">
                            <img v-if="headImg" :src="headImg" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    jpg、png、gif格式，60x60像素，不超过2MB
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="abolish_editheadimg">取 消</el-button>
                <el-button type="primary" @click="submit_editheadimg('ruleForm2')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {staffuser_findById,staffuser_update} from '@/request/api'
    export default {
        data(){
            return{
                usernameImg:'',
                ifshow:false,
                dialogFormVisible4:false,
                dialogFormVisible3:false,
                dialogFormVisible2:false,
                dialogFormVisible1:false,
                dialogFormVisible:false,
                headImg:'',
                data:[],
                form:{},
                pwd:{
                    repeatpwd: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                    password: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],

                },
                names:{
                    name:[
                        { required:true,message:'不能为空',trigger:'change'}
                    ]
                },
                phones:{
                    phone:[
                        { required:true,message:'不能为空',trigger:'change'}
                    ]
                },
                idcard:{
                    idCard:[
                        { required:true,message:'不能为空',trigger:'change'}
                    ]
                },
                form1:{},
                form2:{},
                form3:{},
                form4:{}
            }
        },
        mounted(){
            let username = localStorage.getItem('ms_username');
            this.usernameImg = username.substring(0,1)

            this.init()
        },
        methods:{
            imgPreview(file,fileList) {
                this.headImg =  URL.createObjectURL(file.raw);
                let fileName = file.name;
                let regex = /(.jpg|.gif|.png)$/;
                if (regex.test(fileName.toLowerCase())) {
                    this.data.files = file.raw
                    this.data.headImg = file.name
                } else {
                    this.$message.error('请选择图片文件');
                }
            },
            submit_editpwd(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if(this.form.password != this.form.repeatpwd){
                            this.$notify({
                                title: '提示',
                                message: '两次输入不一致',
                                type: 'info'
                            });
                        }else{
                            this.data.password = this.form.password
                            let formdata = new FormData()
                            for(var a in this.data){
                                formdata.append(a,this.data[a])
                            }
                            staffuser_update(formdata).then((res)=>{
                                this.$notify({
                                    title: '提示',
                                    message: '修改成功',
                                    type: 'success'
                                });
                                this.dialogFormVisible = false
                                this.init()
                            })
                        }
                    }else{
                        return false
                    }
                 })
            },
            submit_editphone(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let formdata = new FormData()
                        let reg = /^1[34578]\d{9}$/;
                        if(!reg.test(this.form4.phone)){
                            this.$notify({
                                title: '提示',
                                message: '手机号格式不正确，请重新填写',
                                type: 'info'
                            });
                            return false
                        }
                        this.data.phone = this.form4.phone
                        for(var a in this.data){
                            formdata.append(a,this.data[a])
                        }
                        staffuser_update(formdata).then((res)=>{
                            this.$notify({
                                title: '提示',
                                message: '修改成功',
                                type: 'success'
                            });
                            this.dialogFormVisible4 = false
                            this.init()
                        })
                    }
                 })
            },
            submit_editname(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.data.name = this.form1.name
                        let formdata = new FormData()
                        for(var a in this.data){
                            formdata.append(a,this.data[a])
                        }

                        staffuser_update(formdata).then((res)=>{
                            this.$notify({
                                title: '提示',
                                message: '修改成功',
                                type: 'success'
                            });
                            this.dialogFormVisible1 = false
                            this.init()
                        })

                    }else{
                        return false
                    }
                 })
            },
            submit_editidcard(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                        this.data.idCard = this.form2.idCard
                        if(!reg.test(this.data.idCard)){
                            this.$notify({
                                title: '提示',
                                message: '身份证号输入有误，请重新填写',
                                type: 'info'
                            });
                            return false
                        }

                        let formdata = new FormData()
                        for(var a in this.data){
                            formdata.append(a,this.data[a])
                        }
                        staffuser_update(formdata).then((res)=>{
                            this.$notify({
                                title: '提示',
                                message: '修改成功',
                                type: 'success'
                            });
                            this.dialogFormVisible2 = false
                            this.init()
                        })

                    }else{
                        return false
                    }
                 })
            },
            submit_editheadimg(formName){

                let formdata = new FormData()
                for(var a in this.data){
                    formdata.append(a,this.data[a])
                }
                // if(this.data.oldHeadImg == ""){

                // }else{
                    staffuser_update(formdata).then((res)=>{
                        this.$notify({
                            title: '提示',
                            message: '修改成功',
                            type: 'success'
                        });
                        this.dialogFormVisible3 = false
                        this.init()
                    })
                // }

            },
            editpwd(){
                this.dialogFormVisible = true
            },
            abolish_editpwd(){
                this.dialogFormVisible = false
            },
            editname(){
                this.dialogFormVisible1 = true
            },
            abolish_editname(){
                this.dialogFormVisible1 = false
            },
            editidcard(){
                this.dialogFormVisible2 = true
            },
            abolish_editidcard(){
                this.dialogFormVisible2 = false
            },
            init(){
                var id = localStorage.getItem("userid")
                staffuser_findById(id).then((res)=>{
                    this.data = res.data
                    this.data.oldHeadImg = res.data.headImg
                    if(this.data.headImg == "" || this.data.headImg == null || this.data.headImg == "null"){
                        this.ifshow = false
                    }else{
                        this.ifshow = true
                        this.headImg = this.$store.state.imageUrls + this.data.headImg
                    }
                    if(this.data.idCard == "null" || this.data.idCard == "" || this.data.idCard == null){
                        this.data.idCard = ""
                    }
                })
            },
            editheadimg(){
                this.dialogFormVisible3 = true
            },
            abolish_editheadimg(){
                this.dialogFormVisible3 = false
            },
            editphone(){
                this.dialogFormVisible4 = true
            },
            abolish_editphone(){
                this.dialogFormVisible4 = false
            },
        }
    }
</script>

<style scoped>
.demo-ruleForm{
    margin-top: 20px;
}
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width:180px;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
.pc-button{
    position: absolute;
    right:0;
    top:13px;
}
.pc-con{
    position: absolute;
    left:90px;
}
.personagecontent{
    height:50px;
    line-height:50px;
    font-size:14px;
    border-bottom:1px solid #DCDFE6;
    /* margin-top:20px; */
    position: relative;
}
.headImg-content{
    text-align: center;
    margin-top:20px;
    border-radius: 50%;
    background:#909399;
    width:80px;
    height:80px;
    display: inline-block;
    margin: auto;

}
.headImg{
    width:80px;
    height:80px;
    border-radius: 50%;
    /* margin: auto; */
}
</style>
